<template>
	<view :style="{ height: hasHeight ? navHeight + 'rpx' : 'auto' }">
		<view class="navbox com_tt" :style="[{ paddingTop: `${COMMON_VAR.statusBarHeight}rpx` }, navstyle, rollingChange_fun]" :class="getComputedStyle" id="mynav">
			<view class="navbox_nav">
				<view
					class="nav_content"
					:style="{
						width: isdiy ? `${maxwidth}rpx` : 'auto',
					}"
				>
					<block v-if="isdiy">
						<slot name="diy"></slot>
					</block>
					<block v-else>
						<view class="component_default">
							<view class="default_com_view">
								<view class="serch left_icon" @click="goweburl_f('/pagesA/index/search')" v-if="search">
									<image src="/static/images/sousuo.png" class="left_icon_img"></image>
								</view>
								<view class="back left_icon" @click="goback()" v-if="back">
									<image :src="`/static/images/top_back_${colorModel}.png`" class="left_icon_img"></image>
								</view>
							</view>
							<view class="default_center">
								<text class="navtop_tt" v-if="title" :style="[rollingChange_opa_fun]">
									{{ title }}
								</text>
								<view class="navtop_ii" :style="{ height: `${logoheight}rpx` }" v-if="logo">
									<image src="/static/images/logobt.png" alt="" class="ii-logo rubberBand du07 de05" mode="heightFix"></image>
								</view>
							</view>
							<view class="default_com_view"></view>
						</view>
					</block>
				</view>
			</view>
			<block v-if="botSlot">
				<slot name="botSlot"></slot>
			</block>
		</view>
	</view>
</template>

<script>
import { common } from '@/util/method.js';
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'diynav',
	props: {
		// 主题颜色 dark 黑模式  day 白模式
		colorModel: {
			type: String,
			default: 'day',
		},
		back: {
			type: Boolean,
			default: false,
		},
		backfun: {
			type: Boolean,
			default: false,
		},
		search: {
			//显示默认搜索
			type: Boolean,
			default: false,
		},
		isdiy: {
			// 整块导航插槽
			type: Boolean,
			default: false,
		},
		pagename: {
			type: String,
		},
		title: {
			//显示标题
			type: String,
		},
		logo: {
			//显示居中logo
			type: Boolean,
			default: false,
		},
		logoheight: {
			//logon高度
			type: Number,
			default: 54,
		},
		navstyle: {},
		leftSlot: {
			//左侧插槽
			type: [Boolean],
			default: false,
		},
		rightSlot: {
			//中间插槽
			type: [Boolean],
			default: false,
		},
		botSlot: {
			//下方插槽
			type: [Boolean],
			default: false,
		},

		isFixed: {
			type: [Boolean],
			default: true,
		},
		hasHeight: {
			type: [Boolean],
			default: false,
		},
		default_height: {
			type: [Number, String],
			default: 64,
		},
		pageScrollTop: {
			type: [Number, String],
			default: 0,
		},
		// 阈值
		pageScrollTop_targe: {
			type: [Number, String],
			default: 50,
		},
		// 滚动改变背景
		rollingChange: {
			type: [Boolean],
			default: false,
		},
		// 滚动改变背景
		rollingChange_title: {
			type: [Boolean],
			default: false,
		},
		// 默认背景色
		rollingChange_color: {
			type: [String],
			default: '#ffffff',
		},
	},
	data() {
		return {
			// public_data: this.public_data,
			change_var: {},
			paddingTop: 0,
			navHeight: 0,
			height: 'auto',
			width: 'auto',
			maxwidth: 750,
			render: -1,
		};
	},

	beforeCreate() {},

	created() {
		this.init_pagedata('diynav');
	},
	mounted() {
		// console.log('mounted')
	},
	destroyed() {
		// console.log(title, 'diy destroyed')
	},

	computed: {
		// 背景渐隐渐显
		rollingChange_fun() {
			let _this = this;
			if (!_this.rollingChange) return;
			let target = _this.pageScrollTop_targe;
			let ratio = _this.pageScrollTop / target;
			let hex = _this.hexadecimalToRgb(_this.rollingChange_color);

			// console.log(target, ratio, _this.pageScrollTop, _this.pageScrollTop_targe);

			return {
				'background-color': `rgba(${hex},${ratio >= 1 ? 1 : ratio})`,
			};
		},

		// 标题渐隐渐显
		rollingChange_opa_fun() {
			let _this = this;
			if (!_this.rollingChange_title) return;
			let target = _this.pageScrollTop_targe;
			let ratio = _this.pageScrollTop / target;

			// console.log(target, ratio, _this.pageScrollTop, _this.pageScrollTop_targe);
			return {
				opacity: `${ratio >= 1 ? 1 : ratio}`,
			};
		},

		getComputedStyle() {
			let _class = [this.colorModel];
			// , 'jj_kb_a'
			if (this.isFixed) {
				_class.push('statusFixed');
			}
			return _class;
		},
	},
	methods: {
		...common,
		init_pagedata_callback() {
			let _this = this;
			_this.settop();
		},

		goback(delta = 1) {
			if (this.backfun) {
				this.$emit('topback');
				return;
			} else {
				this.com_page_back();
			}
		},
		settop() {
			let _this = this;
			const query = uni.createSelectorQuery().in(this);
			query.select('#mynav')
				.boundingClientRect(data => {
					_this.navHeight = _this.pxTorpx(data.height);
					_this.render = 1;
					_this.$emit('settop', _this.navHeight);
				})
				.exec();
		},
	},
	watch: {},
};
</script>

<style lang="scss">
.statusFixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

.navbox {
	width: 750rpx;
	transition-property: opacity, background-color;
	// transition-duration: .3s;
}

.navbox_nav {
	padding-top: 8rpx;
	padding-bottom: 10rpx;
}

.nav_content {
	position: relative;
	z-index: 1;
}

.component_default {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	height: 64rpx;
}

.default_com_view {
	min-width: 80rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.left_icon {
	// width: 74rpx;
	width: 80rpx;
	height: 64rpx;

	display: flex;
	align-items: center;
	justify-content: center;
	// padding: 0 20rpx;
}

.left_icon_img {
	width: 40rpx;
	height: 40rpx;
	// margin: 0 20rpx;
}

.default_center {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64rpx;
}

.navtop_tt {
	font-weight: 700;
	color: #333333;
	font-size: 32rpx;
	line-height: 64rpx;
}

.ii-logo {
	// animation-delay: 0.5s;
	// animation-duration: 0.75s;
	height: 100%;
}
</style>
